找传奇、传世资源到传世资源站!

html5 tab滑动切换

8.5玩家评分(1人评分)
下载后可评
介绍 评论 失效链接反馈

html5 tab滑动切换 HTML/CSS-第1张 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport"><meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="css/order.css" /><link rel="stylesheet" type="text/css" href="css/swiper.min.css" /><script type="text/javascript" src="js/swiper.min.js"></script><script type="text/javascript" src="js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="templates/kw/js/touchslider.js"></script><title>微信点菜</title></head><body><div class="new_header"> <a class="new_header_back" href="#"> <img src="icon/back.png"></img> </a> <h2>点菜系统</h2> <a class="new_header_mine" href="#"> <img src="icon/mes.png"></img> </a> </div> <div class="title_bar"> <ul id="pagenavi1" class="newTitle "> <li > <span> <a href="#" id="item0" class="selectbar">面食</a> </span> </li> <li > <span> <a href="#" id="item1">荤菜</a> </span> </li> <li > <span> <a href="#" id="item2">素菜</a> </span> </li> <li > <span> <a href="#" id="item3" >小吃</a> </span> </li> </ul></div> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide blue-slide"> <ul class="big_box"> <li class="li_list"> <div class="dishs_"> <div class="dishs"> <img src="images/020011.jpg" width="100%" /> <div class="dishes-name"> <div class="left">凉拌猪耳朵</div> </div> </div> <div class="dishes-operation"> <div class="left">¥48:00</div> <div class="right"> <a href="#"> <img class="add" src="images/add_unselected.png"></img> </a> </div> </div> </div> </li> <li class="li_list"> <div class="dishs_"> <div class="dishs"> <img src="images/020011.jpg" width="100%" /> <div class="dishes-name"> <div class="left">凉拌猪耳朵</div> </div> </div> <div class="dishes-operation"> <div class="left">¥48:00</div> <div class="right"> <a href="#"> <img class="add" src="images/add_unselected.png"></img> </a> </div> </div> </div> </li> </ul> </div> <div class="swiper-slide blue-slide"> <ul class="big_box"> <li class="li_list"> <div class="dishs_"> <div class="dishs"> <img src="images/020011.jpg" width="100%" /> <div class="dishes-name"> <div class="left">凉拌猪耳朵</div> </div> </div> <div class="dishes-operation"> <div class="left">¥48:00</div> <div class="right"> <a href="#"> <img class="add" src="images/add_unselected.png"></img> </a> </div> </div> </div> </li> </ul> </div> <div class="swiper-slide blue-slide"> <ul class="big_box"> <li class="li_list"> <div class="dishs_"> <div class="dishs"> <img src="images/020011.jpg" width="100%" /> <div class="dishes-name"> <div class="left">凉拌猪耳朵</div> </div> </div> <div class="dishes-operation"> <div class="left">¥48:00</div> <div class="right"> <a href="#"> <img class="add" src="images/add_unselected.png"></img> </a> </div> </div> </div> </li> </ul> </div> <div class="swiper-slide blue-slide"> <ul class="big_box"> <li class="li_list"> <div class="dishs_"> <div class="dishs"> <img src="images/020011.jpg" width="100%" /> <div class="dishes-name"> <div class="left">凉拌猪耳朵</div> </div> </div> <div class="dishes-operation"> <div class="left">¥48:00</div> <div class="right"> <a href="#"> <img class="add" src="images/add_unselected.png"></img> </a> </div> </div> </div> </li> </ul> </div> </div> </div><div class="empty_bar"> <!--最后底部的空间距条,防止footer遮盖前面的内容--></div> <footer class="footer"> <nav class="mainav"> <!--nav 为html5导航链接部分 --> <ul> <li class="home"> <a href="default.htm" class="curry"> <img src="icon/home.png" /> </a> </li> <li class="prefer"> <a href="site/showcatid12.html" > <img src="icon/shop.png" /> </a> </li> </ul> <br class="clear" /> </nav> </footer> <script type="text/javascript"> var index; var page = 'pagenavi1'; var as = document.getElementById(page).getElementsByTagName('a'); var mySwiper = new Swiper('.swiper-container',{loop: false,onSlideChangeStart: function(swiper){$("#item" swiper.activeIndex).addClass("selectbar"); for (var i = 0; i <= as.length; i ) {if(i!=swiper.activeIndex){$("#item" i).removeClass();}} } }); for (var i = 0; i <= as.length; i ) { (function() {var j = i;$('#item' j).click(function(){mySwiper.slideTo(j, 500, false);for (var i = 0; i <= as.length; i ) {$("#item" i).removeClass();}$("#item" j).addClass("selectbar");});})(); }</script></body></html>

评论

发表评论必须先登陆, 您可以 登陆 或者 注册新账号 !


在线咨询: 问题反馈
客服QQ:174666394

有问题请留言,看到后及时答复